<template>
  <div class="global-detail" ref="detail">
    <el-form :model="inputData" :rules="rules" inline label-width="80px" ref="form"
      >
      <template v-for="(item, index) in inputConfig" v-if="!item.hidden">
        <el-form-item :label="item.label" :prop="item.props" v-if="item.type == 'input'"
          >
          <el-input :type="item.inputType ? item.inputType : 'text'" :disabled="item.disabled"
            v-model="inputData[item.props]" :placeholder="$t('common.input')"
            @change="changeData(item, $event)"></el-input>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.props" v-else-if="item.type == 'table'">
          <el-input :disabled="item.disabled" v-model="inputData[item.props]" :readonly="item.readonly"
            @change="changeData(item, $event)">
            <!-- readonly,控制组件只读,true为只读,不填 或者false则可以输入 -->
            <i v-if="!item.disabled" @click.stop="setPop(index, item, item.props)" class="el-input__icon el-icon-search"
              slot="suffix" style="cursor: pointer;"></i>
          </el-input>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.props" v-else-if="item.type == 'select'"
          >
          <el-select v-if="item.multiple" :disabled="item.disabled" :multiple="true" :placeholder="$t('common.select')"
            v-model="multiValues[item.id]" @change="changeData(item, $event)">
            <el-option v-for="(i, idx) in item.options" :disabled="i.disabled" :key="idx"
              :value="i.description"></el-option>
          </el-select>
          <el-select v-else :disabled="item.disabled" :placeholder="$t('common.select')" v-model="inputData[item.props]"
            @change="changeData(item, $event)">
            <el-option label="     " value=""></el-option>
            <el-option :disabled="i.disabled" :key="idx" :label="i.description" v-model="i.code"
              v-for="(i, idx) in item.options"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.props" v-else-if="item.type == 'date'">
          <el-date-picker :disabled="item.disabled" :picker-options="pickerOptions" placeholder type="datetime"
            v-model="inputData[item.props]" value-format="timestamp" @change="changeData(item, $event)">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.props" v-else-if="item.type == 'dateTimeRange'">
          <el-date-picker :disabled="item.disabled" :picker-options="pickerOptions1" placeholder type="datetimerange"
            :start-placeholder="$t('app.startDate')" :end-placeholder="$t('app.endDate')" range-separator="-"
            v-model="inputData[item.props]" value-format="timestamp" @change="changeData(item, $event)">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.props" v-else-if="item.type == 'textarea'"
          :style="{ width: item.width ? item.width : '320px' }">
          <el-input :disabled="item.disabled" :style="{ height: item.height }" placeholder type="textarea"
            v-model="inputData[item.props]" :placeholder="$t('common.input')"
            @change="changeData(item, $event)"></el-input>
        </el-form-item>
        <el-form-item :prop="item.props" :label="item.label" v-else-if="item.type == 'checkbox'">
          <el-checkbox :style="{ opacity: item.hidden }" style="line-height: 40px" :disabled="item.disabled"
            :false-label="0" :true-label="1" v-model="inputData[item.props]">
            {{ item.label }}
          </el-checkbox>
        </el-form-item>
        <el-form-item :prop="item.props" :label="item.label" v-else-if="item.type == 'switch'">
          <el-switch v-model="inputData[item.props]" :active-value="1" :inactive-value="0"
            @change="changeData(item, $event)">
          </el-switch>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.props" v-else-if="item.type == 'map'"
          >
          <el-input :type="item.inputType ? item.inputType : 'text'" :disabled="item.disabled"
            v-model="inputData[item.props]" @change="changeData(item, $event)">
            <i class="el-icon-map-location" slot="suffix" @click="handleMapIconClick(item)">
            </i>
          </el-input>
        </el-form-item>
        <el-form-item :key="item.prop + '-' + index" :label="item.label" :prop="item.props"
          v-else-if="item.type == 'address'" >
          <el-cascader :options="regionData" v-model="inputData[item.props]" :disabled="item.disabled" filterable
            clearable :props="{ value: 'label' }" @change="changeData(item, $event)">
          </el-cascader>
        </el-form-item>
        <el-form-item :key="item.prop + '-' + index" :label="item.label" :prop="item.props"
          v-else-if="item.type == 'inputSection'" >
          <GInputSection></GInputSection>
        </el-form-item>
        <div class="titleLabel" v-html="item.label" v-else-if="item.type == ''" :key="item.prop + '-' + index"></div>
        <br v-if="item.break" />
      </template>
    </el-form>
    <el-dialog :modal="false" :visible.sync="dialogTableVisible" title="" top="0" v-dialogDrag
      :close-on-click-modal="false" width="700px">
      <v-table :checked="false" :hasEdit="false" :height="'270px'" :pageSize="popPageSize" :right="true"
        :tableConfig="popTableConfig" :page="page" :tableData="popTableData" :total="popTotal" @searhData="searhData"
        @findData="getPopTableData" @amend="popAmend" @upData="getPopTableData"
        @getTableData="getPopTableData"></v-table>
    </el-dialog>

    <el-dialog :modal="false" :visible.sync="mapModule.flag" title="" top="0" v-dialogDrag :close-on-click-modal="false"
      width="50%">
      <g-map v-if="mapModule.flag" :addressInfo="mapModule.address" @handle-marker="handlerMarker"></g-map>
      <div slot="footer">
        <el-button @click="mapModule.flag = false">{{ $t("common.cancel") }}</el-button>
        <el-button type="info" @click="confirmMarker">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import { regionData } from 'element-china-area-data'
import table from "commons/Table";
import baseMixin from "@/mixins/BaseMixin";
import bus from "@/bus/bus";
//label:"&nbsp;" html代码空格
/*
    inputConfig height:"**px" 配置textarea的高度
                type  table是配置弹框的
                            tableConfig 弹框的table的配置
                            url 弹框table的数据请求路径
                            table选择之后回传出一个pop的方法参数 data ，id ，close，listid
                            readonly,控制组件只读,true为只读,不填 或者false则可以输入
                      select下拉框
                      checkbox单选框
                      date时间选择
                      input输入框
*/
export default {
  name: "",
  mixins: [baseMixin],
  props: {
    inputConfig: {
      type: Array
    },
    detailData: {
      type: Object
    },
    rules: {
      type: Object
    },

  },
  data() {
    return {
      regionData,
      inputData: {},
      config: [],
      value: "",
      getTableProp: "",
      newData: {},
      clickId: '',
      num: 0,
      selectArr: [],
      dialogTableVisible: false,
      popflag: true,
      popTableConfig: [],
      popPageSize: 100,
      page: 1,
      popTotal: 1000,
      popTableData: [],
      popUrl: "",
      popClickId: "",
      popName: "",
      listId: "",
      tableSearhData: {},
      multiValues: {},
      mapModule: {
        flag: false,
        address: "",
        point: null,
        data: null
      },
      pickerOptions: {
        shortcuts: [{
          text: this.$t('app.today'),
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: this.$t('app.lastday'),
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: this.$t('app.lastweek'),
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      pickerOptions1: {
        shortcuts: [{
          text: this.$t('app.week'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('app.month'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('app.quarter'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  created() {
  },
  methods: {
    changeData(item, $event) {
      this.$set(this.inputData, item.props, $event)
      this.$emit("changeDetail", this.inputData, item.props)
    },
    handleMapIconClick(data) {
      this.mapModule.point = null;
      this.mapModule.address = "";
      this.mapModule.flag = true;
      this.mapModule.data = data;
      if (this.inputData[data.props]) {
        this.mapModule.address = this.inputData[data.props];
      }
    },
    handlerMarker(res) {
      console.log(res, '地图位置信息');
      this.mapModule.address = res.address;
      this.mapModule.point = res;
    },
    confirmMarker() {
      const { street, streetNumber } = this.mapModule.point.addressComponents
      if (street || streetNumber) {
        this.inputData[this.mapModule.data.props] = street + streetNumber
      } else {
        this.$message(this.$t('msg.msg81'))
      }
      this.mapModule.flag = false
    },
    setPop(id, item, arrid) {
      let pop = document.getElementsByClassName("el-dialog");
      if (!this.dialogTableVisible) {
        this.popTableConfig = item.tableConfig;
        this.popClickId = id;
        this.listId = arrid;
        this.popUrl = item.url;
        this.getPopTableData(1, {});
        /*let bodyW = document.body.offsetWidth;
        let bodyY = document.body.offsetHeight;
        let pageX = e.pageX;
        let pageY = e.pageY;*/
        pop[pop.length - 1].style.left = 211 + "px";
        pop[pop.length - 1].style.top = 127 + "px";
        /* for (let i = 0; i < pop.length; i++) {
             /!* pop[i].style.left = pageX - 300 + "px";
              pop[i].style.top = pageY + 30 + "px";*!/
             pop[i].style.left = 211 + "px";
             pop[i].style.top = 127 + "px";
         }*/
        this.dialogTableVisible = true;
      }
    },
    async getPopTableData(page, data) {
      let url = "";
      if(this.popUrl.includes('/?')){
        url = this.popUrl.replace('/?',`/${page}`);
      }else if(this.popUrl.endsWith('/')){
        url = this.popUrl + page
      }else{
        url = this.popUrl
      }
      try {
        let res = await this.$api.post(url, data);
          const data = res.page || res.data || res.bean;
          this.popTableData = data?.list;
          this.page = data?.curPage;
          this.popPageSize = data?.pageSize;
          this.popTotal = data?.total;
      } catch (e) {
        this.popTableData = [];
        this.page = 1;
        this.popPageSize = 1;
        this.popTotal = 1;
        this.$message.error(e);
      }
    },
    popAmend(index) {
      this.$emit('pop', this.popTableData[index], this.popClickId, (flag) => {
        this.dialogTableVisible = flag
      }, this.listId);
    },
    getData(prop, val, type) {
      if (type === "select") {
        if (this.rules) {
          if (this.rules[prop]) {
            if (val != "") {
              this.inputData[prop] = val;
            }
          } else {
            if (val === "") {
              this.inputData[prop] = " ";
            } else {
              this.inputData[prop] = val;
            }
          }
        }
      }
      if (val != '') {
        this.newData[prop] = val;
      } else {
        delete this.newData[prop];
      }
      this.$emit('changeData', this.newData, prop, val);
    },
    getMultiData(prop, val, type) {
      if (val[prop]) {
        this.inputData[prop] = this.multiValues[type]
      }
    },
    searhData(data, up) {
      if (!up) {
        this.tableSearhData = data;
      } else {
        this.tableSearhData = data;
        this.getPopTableData(1, this.tableSearhData);
      }
    },
    getParams() {
      let params = null
      this.$refs.form.validate((valid) => {
        if (valid) {
          params = this.inputData
        } else {
          params = false
        }
      });
      return params
    },
  },
  mounted() {

  },

  watch: {
    inputConfig: {
      handler(nv, ov) {
        if (nv && Array.isArray(nv) && nv.length > 0) {
          nv.forEach(item => {
            this.$set(this.inputData, item.props, item.defaultValue)
          })
        }
      },
      immediate: true,
      deep: true
    },
  },
  components: {
    "v-table": table
  }
  ,
}
  ;
</script>

<style lang="scss" scoped>
.global-detail {
  width: 100%;
  height: calc(100% - 31px);

  .el-input,
  .el-select {
    width: 160px;
    /*min-height: 50px;*/
    margin-right: 16px;
  }

  .el-date-editor--datetimerange {
    width: 320px;
    margin-right: 16px;
  }

  ::v-deep .el-date-editor .el-range-separator {
    line-height: 100%;
  }

  .titleLabel {
    padding: 0px 28px 0px 28px;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .el-checkbox {
    line-height: 26px !important;
    margin-bottom: 0 !important;
  }

  .el-icon-map-location {
    padding: 0 5px;
    cursor: pointer;
  }
}
</style>
